<script lang="ts" setup>
/*
   简单用法
   <XPagination
        v-model:page-size="pageInfo.pageSize"
        v-model:current-page="pageInfo.currentPage"
        v-model:total="pageInfo.total"
    />
 */
import {computed, useAttrs} from 'vue'
// 剩余参数,可参照el-pagination传入
const attrs = useAttrs()
const props = withDefaults(
    defineProps<{
      currentPage: number
      pageSize: number
      total: number
      // 新增的,我喜欢把分页水平居右
      position?: 'left' | 'right',
    }>(), {
      position: 'right'
    }
)
const emit = defineEmits(['update:currentPage', 'update:pageSize', 'update:total'])
const currentPage = computed({
  get() {
    return props.currentPage
  },
  set(value) {
    emit('update:currentPage', value)
  }
})
const pageSize = computed({
  get() {
    return props.pageSize
  },
  set(value) {
    emit('update:pageSize', value)
  }
})
const total = computed({
  get() {
    return props.total
  },
  set(value) {
    emit('update:total', value)
  }
})
// ---自己设置的默认属性(可传入参数覆盖)-----
const layout = "total, sizes, prev, pager, next, jumper"
</script>
<template>
  <el-pagination
      :class="{'justify-end' : position === 'right'}"
      :layout="layout"
      v-bind="attrs"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      v-model:total="total"
  />
</template>

<style scoped lang="scss">
</style>